@import "compass";
@import "../common";

$index_icon-sprite-dimensions:true;
@import "index_icon/*.png";


.cards {@extend .clearfix;
  li {float: left;height: 280px;width: ($main-w - 40px)/3;border-radius: $border-default-radius;background: $bg-white;
    .head {padding: 15px 10px;height: 90px;border-top-left-radius: $border-default-radius;border-top-right-radius: $border-default-radius;}
  }
  .user {margin-right: 20px;
    .head {position: relative;background-color: #00cdac;@include background(linear-gradient(left,#00cdac,#02aab0));
      img {position: absolute;left: 50%;bottom: -28px;width: 100px;height: 100px;@include translateX(-50%);background: $bg-info;border-radius: 100%;border: 3px solid #fff;}
    }
    dt {padding-top: 45px;margin-bottom: 10px;font-size: 18px;text-align: center;}
    dd {margin-bottom: 10px;font-size: 16px;color: $font-info-color;text-align: center;
      .progress {@include inline-block;width: 35px;height: 15px;margin-right: 5px;border-radius: 3px;background-color: #79c51f}
      i {color: #79c51f;}
      img {margin: 0 5px;}
      .icon1 {@include index_icon-sprite(iphone)}
      .icon2 {@include index_icon-sprite(user)}
      .icon3 {@include index_icon-sprite(card)}
      .icon4 {@include index_icon-sprite(pwd)}
      .icon1.active {@include index_icon-sprite(iphone1)}
      .icon2.active {@include index_icon-sprite(user1)}
      .icon3.active {@include index_icon-sprite(card1)}
      .icon4.active {@include index_icon-sprite(pwd1)}
    }
  }
  .fund,
  .bank {
    .head {color: $font-white-color;
      strong {display: block;margin-top: 20px;font-size: 36px;text-align: center;}
    }
  }
  .fund {margin-right: 20px;
    .head {margin-bottom: 35px;
      background-color: #6d99ff;@include background(linear-gradient(left,#6d99ff,#3c6cde));
    }
    a {margin-bottom: 15px;}
  }
  .bank {
    .head {margin-bottom: 30px;
      background-color: #ec4979;@include background(linear-gradient(left,#ec4979,#f66974));
    }
    .text {width: 224px;margin: 0 auto;color: $font-info-color-light;
      .p1 {margin-bottom: 5px;}
      .p2 {margin-bottom: 15px;}
      .a1 {margin-right: 15px;}
    }
  }
}

.tab-menu {background: $bg-white;padding: 22px 20px 20px 30px;margin: 20px 0 10px;
  strong {float: left;font-size: 16px;margin-right: 65px;color: $font-default-color;}
  ul li {margin-right: 16px;}
  .r {float: right;margin-top: 5px;@include triangle(13px,right,2px,$border-info-color);}
}


.empty{
  .cards{
   
      .dasupay{
        width: 625px;
        margin-right: 0px;
        .head{
         /*  background: url('/res/mpe/img/logo.png') no-repeat center;
          background-color: #6d99ff;@include background(linear-gradient(left,#6d99ff,#3c6cde)); */
          position: relative;
          img{
             position: absolute;
            left: 33%;
            width: 196px;
            height: 49px;
            bottom: 30%;
            opacity: 0.3;
          }
        }
        .state{
          a{color: #000;}
          a.danger{color: $font-danger-color;margin-top: 20px;padding:12px 37px;display: inline-block;border:1px solid $border-default-color;border-radius: 5px;}
        }
      }
    
  }
  .panel_empty{
     padding: 36px 24px;
     height: 563px;
     strong{
      font-size: $font-16;
      color: $font-default-color;
     }
    
  }
  
}
